@charset "utf-8";

@import "reset";
@import "common";

@function vw($px) {
  @return $px/750px * 100 * 1vw;
}

.web {
  header {
    position: absolute;
    width: 100%;
    background: white;
    top: 0;
    left: 0;
    z-index: 1;
    .psifl {
      width: vw(706px);
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: vw(16px) 0 vw(10px);
      .logo_box {
        width: vw(124px);
        height: vw(124px);
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .search_box {
        width: vw(268px);
        height: vw(54px);
        border-radius: vw(27px);
        box-sizing: border-box; //所有的border和内边距都会往里面挤
        border: vw(2px) solid $index_color;
        form {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          input {
            width: vw(180px);
            height: vw(46px);
            font-size: vw(24px);
            color: #777777;
            outline: none; //去掉点击外边框
            border: none;
            border-radius: vw(10px);
          }
          button {
            width: vw(38px);
            height: vw(38px);
            color: $index_color;
            border: none;
            outline: none;
            background: transparent;
          }
        }
      }
      .city_box {
        width: vw(164px);
        height: vw(60px);
        border: vw(2px) solid $index_color;
        box-sizing: border-box;
        padding-left: vw(14px);
        position: relative;
        select {
          width: 99%;
          height: 99%;
          border: none;
          outline: none;
          -webkit-appearance: none; //用来去掉标签自带样式
        }
        &::after {
          content: "";
          display: block;
          border-top: vw(12px) solid $index_color;
          border-right: vw(14px) solid transparent;
          border-bottom: vw(0px) solid transparent;
          border-left: vw(14px) solid transparent;
          position: absolute;
          top: 50%;
          left: 80%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
  section {
    width: 100%;
    position: absolute;
    top: vw(150px);
    bottom: vw(120px);
    overflow-y: auto;
    .kv {
      width: 100%;
      height: vw(286px);
      overflow: hidden;
      img {
        width: 100%;
      }
      .guntiao {
        width: 100%;
        height: vw(10px);
        background: rgba(0, 0, 0, 0.473);
        position: absolute;
        top: vw(190px);
        left: 0;
        font-size: 0;
        &::after {
          content: "";
          display: inline-block;
          width: vw(130px);
          height: 100%;
          background: #c1c0c0;
          transform: translateX(vw(150px));
        }
      }
    }
    .subtitle {
      width: vw(709px);
      height: vw(90px);
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      .subtitle_left {
        display: flex;
        i {
          font-size: vw(53px);
          color: $index_color;
        }
        span {
          font-size: vw(30px);
          align-self: center;
          margin-left: vw(10px);
        }
      }
      a {
        .subtitle_right {
          margin-top: vw(-52px);
          span {
            font-size: vw(24px);
            color: black;
          }
          i {
            display: inline-block;
            width: vw(25px);
            height: vw(25px);
            border: 1px solid $index_color;
            border-radius: 50%;
            color: $index_color;
            font-size: vw(20px);
            text-align: center;
            line-height: vw(25px);
          }
        }
      }
    }
    .discounts {
      ul {
        width: vw(586px);
        margin: 0 auto;
        li {
          display: flex;
          justify-content: space-between;
          a {
            span {
              display: block;
              width: vw(240px);
              height: vw(92px);
              overflow: hidden;
              margin: vw(15px) 0;
              img {
                width: 100%;
              }
            }
          }
        }
      }
    }
    .details {
      width: vw(708px);
      margin: vw(15px) auto;
      display: flex;
      justify-content: space-between;
      .details_tu {
        width: vw(210px);
        height: vw(164px);
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .price {
        width: vw(480px);
        height: vw(164px);
        a {
          .price_name {
            display: flex;
            justify-content: space-between;
            margin: vw(28px) 0 vw(0px);
            p {
              color: black;
              font-size: vw(30px);
            }
            span {
              font-size: vw(22px);
              color: #858585;
            }
          }
        }
        .price_meal {
          padding: 0 vw(6px);
          span {
            font-size: vw(22px);
            color: #494949;
          }
        }
        .price_sell {
          display: flex;
          justify-content: space-between;
          p {
            font-size: vw(32px);
            color: $index_color;
          }
          span {
            font-size: vw(22px);
          }
        }
      }
    }
  }
}
